<template>
  <el-container v-loading="loading" class="app-container">
    <el-main class="page-home">
      <div class="page-home-header">
        <div class="home-title">机车实时信息</div>
        <ShowTime :style-obj="{ color: '#0ebfbf', 'font-size': '28px' }" />
      </div>
      <div class="block block-custom">
        <el-tabs type="border-card" v-model="activeTab">
          <!-- 图形展示区域 -->
          <el-tab-pane label="图形展示" name="picture" :key="updatenumber">
            <keep-alive>
              <div class="page-home-wrapper">
                <div v-for="(item, index) in trainInfoList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" :key="changeTrainInfoList" v-touch-ripple class="function-enter" :class="boderStyleClass(item.alarmLevel)" style="width: 750px" @click="CheckTrainInfoDetail(item.trainId)">
                  <el-row :gutter="0" :class="{ border_red: item.alarmLevel == '1', border_orange: item.alarmLevel == '2', border_yellow: item.alarmLevel == '3', border_white: item.alarmLevel != '1' && item.alarmLevel != '2' && item.alarmLevel != '3' }">
                    <el-col :span="4">
                      <el-badge id="badgeItem" :class="getBadgeType(item.alarmLevel)" :type="getBadgeType(item.alarmLevel)" :hidden="getBadgeHidden(item.alarmLevel)">
                        <div class="function-enter-img">
                          <svg-icon v-if="item.traceWarnState === '在线'" icon-class="train-online" class-name="icon-train-svg" style="height: 100px; font-size: 100px" />
                          <svg-icon v-else icon-class="train-offline" class-name="icon-train-svg" style="height: 100px; font-size: 100px" />
                        </div>
                      </el-badge>
                      <div class="function-enter-tip">{{ item.trainNo }}</div>
                    </el-col>
                    <el-col :span="20">
                      <el-row :gutter="10">
                        <el-col :span="6" class="tab-bot">
                          <div class="bottom-one-cen">
                            <el-divider direction="vertical" class="sty" />
                            <span>机车号</span>
                            <p>{{ item.trainNo }}</p>
                          </div>
                        </el-col>

                        <el-col :span="6" class="tab-bot">
                          <div class="bottom-one-cen">
                            <el-divider direction="vertical" class="sty" />
                            <span>机车型号</span>
                            <p>{{ item.trainType }}</p>
                          </div>
                        </el-col>
                        <el-col :span="6" class="tab-bot">
                          <div class="bottom-one-cen">
                            <el-divider direction="vertical" class="sty" />
                            <span>位置</span>
                            <p>{{ stationname_list[item.trainRTInfo.stationNo] }}</p>
                          </div>
                        </el-col>

                        <el-col :span="6" class="tab-bot">
                          <div class="bottom-one-cen">
                            <el-divider direction="vertical" class="sty" />
                            <span>预警</span>
                            <p v-if="item.alarmLevel < 4">{{ item.alarmLevel }}级({{ item.alarmTarget }})</p>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row :gutter="10">
                        <el-col :span="6" class="tab-bot">
                          <div class="bottom-one-cen">
                            <el-divider direction="vertical" class="sty" />
                            <span>速度</span>
                            <!-- <p v-if="item.trainRTInfo.speed">{{ parseFloat((item.trainRTInfo.speed * 3.6) / 100).toFixed(2) }}km/h</p> -->
                            <p v-if="item.trainRTInfo.speed">{{ parseFloat(item.trainRTInfo.speed).toFixed(2) }}km/h</p>
                            <p v-else-if="item.trainRTInfo.speed == 0">0km/h</p>
                          </div>
                        </el-col>
                        <el-col :span="6" class="tab-bot">
                          <div class="bottom-one-cen">
                            <el-divider direction="vertical" class="sty" />
                            <span>方向</span>
                            <p v-if="item.trainRTInfo.upDownDir == 0">未知</p>
                            <p v-else-if="item.trainRTInfo.upDownDir == 1">上行</p>
                            <p v-else-if="item.trainRTInfo.upDownDir == 2">下行</p>
                            <p v-else-if="item.trainRTInfo.upDownDir == 3">无方向</p>
                          </div>
                        </el-col>
                        <el-col :span="6" class="tab-bot">
                          <div class="bottom-one-cen">
                            <el-divider direction="vertical" class="sty" />
                            <span>网络</span>
                            <p v-if="item.NetState == '在线'">连接</p>
                            <p v-else>断开</p>
                          </div>
                        </el-col>
                        <el-col :span="6" class="tab-bot">
                          <div class="bottom-one-cen">
                            <el-divider direction="vertical" class="sty" />
                            <span>卫星定位</span>
                            <p v-if="item.GnssInfo.mode == 0">无效</p>
                            <p v-else-if="item.GnssInfo.mode == 1">单点定位</p>
                            <p v-else-if="item.GnssInfo.mode == 2">差分定位</p>
                            <p v-else-if="item.GnssInfo.mode == 4">差分固定解</p>
                            <p v-else-if="item.GnssInfo.mode == 5">差分浮点解</p>
                          </div>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </keep-alive>
          </el-tab-pane>

          <!-- 列表展示区域 -->
          <el-tab-pane label="列表展示" name="table" style="color: white">
            <keep-alive>
              <el-table :expand-row-keys="expends" :row-key="getRowKeys" :key="changeTrainInfoList" v-loading="trainsLoading" :data="trainInfoList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border fit highlight-current-row style="width: 100%" @sort-change="sortChange">
                <!-- 下拉列表展示区域 -->
                <el-table-column type="expand" style="padding: 5px">
                  <template slot-scope="scope" @click="updateSubscribe">
                    <!-- 机车详情、设备gnss定位信息、列车运行实时信、事件窗展示区域 -->
                    <el-row :gutter="0">
                      <!-- 机车详情展示区域 -->
                      <el-col :span="14" style="padding-left: 60px; padding-right: 30px; height: 180px">
                        <el-card class="box-card" style="height: 100%">
                          <div slot="header" class="clearfix">
                            <span style="color: #88db85; font-weight: bolder">卫星定位信息</span>
                          </div>
                          <el-form style="color: #18f4ff" label-position="left" label-width="50px" class="item-detail-form">
                            <el-row :gutter="0">
                              <el-col :span="8">
                                <el-form-item class=".el-form-item__label" label="经度">
                                  <span v-if="scope.row.GnssInfo.lon">{{ ToDegrees(String(scope.row.GnssInfo.lon / 3600000)) }}</span>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item label="搜星">
                                  <span v-if="scope.row.GnssInfo.satellite">{{ scope.row.GnssInfo.satellite }} 颗</span>
                                  <span v-else-if="scope.row.GnssInfo.satellite == 0">0 颗</span>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item label="速度">
                                  <span v-if="scope.row.GnssInfo.speed">{{ parseFloat((scope.row.GnssInfo.speed )).toFixed(2) }}km/h</span>
                                  <span v-else-if="scope.row.trainRTInfo.speed == 0">0 km/h</span>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            <el-row :gutter="0">
                              <el-col :span="8">
                                <el-form-item label="纬度">
                                  <span v-if="scope.row.GnssInfo.lon">{{ ToDegrees(String(scope.row.GnssInfo.lat / 3600000)) }}</span>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item label="精度">
                                  <span v-if="scope.row.GnssInfo.accuracyType == 1">{{ scope.row.GnssInfo.accur_dis / 100 }}(m)</span>
                                  <span v-else-if="scope.row.GnssInfo.accuracyType == 2">{{ scope.row.GnssInfo.accur_hdop / 100 }}(hdop)</span>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item label="模式">
                                  <span v-if="scope.row.GnssInfo.mode == 0">无效</span>
                                  <span v-else-if="scope.row.GnssInfo.mode == 1">单点</span>
                                  <span v-else-if="scope.row.GnssInfo.mode == 2">差分</span>
                                  <span v-else-if="scope.row.GnssInfo.mode == 4">差分固定解</span>
                                  <span v-else-if="scope.row.GnssInfo.mode == 5">差分浮点解</span>
                                </el-form-item>
                              </el-col>
                            </el-row>
                          </el-form>
                        </el-card>
                      </el-col>

                      <!-- 列车运行实时信展示区域 -->
                      <el-col :span="10" style="padding-right: 30px; height: 180px">
                        <el-card class="box-card" style="height: 100%">
                          <div slot="header" class="clearfix">
                            <span style="color: #88db85; font-weight: bolder">机车运行信息</span>
                          </div>
                          <el-form style="color: #18f4ff" label-position="left" label-width="50px" class="item-detail-form">
                            <el-row :gutter="0">
                              <el-col :span="12">
                                <el-form-item class=".el-form-item__label" label="手柄">
                                  <span v-if="scope.row.trainRTInfo.handle == 0">无法获取</span>
                                  <span v-else-if="scope.row.trainRTInfo.handle == 1">向前</span>
                                  <span v-else-if="scope.row.trainRTInfo.handle == 2">向后</span>
                                  <span v-else-if="scope.row.trainRTInfo.handle == 3">中立</span>
                                </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                <el-form-item label="模式">
                                  <span v-if="scope.row.trainRTInfo.mode == 0">无法获取</span>
                                  <span v-else-if="scope.row.trainRTInfo.mode == 1">调车模式</span>
                                  <span v-else-if="scope.row.trainRTInfo.mode == 2">列车模式</span>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            <el-row :gutter="0">
                              <el-col :span="12">
                                <el-form-item label="速度">
                                  <span v-if="scope.row.trainRTInfo.speed">{{ parseFloat((scope.row.trainRTInfo.speed ) ).toFixed(2) }}km/h</span>
                                  <span v-else-if="scope.row.trainRTInfo.speed == 0">0 km/h</span>
                                </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                <el-form-item label="方向">
                                  <span v-if="scope.row.trainRTInfo.upDownDir == 0">无法确定</span>
                                  <span v-else-if="scope.row.trainRTInfo.upDownDir == 1">上行</span>
                                  <span v-else-if="scope.row.trainRTInfo.upDownDir == 2">下行</span>
                                  <span v-else-if="scope.row.trainRTInfo.upDownDir == 3">无方向</span>
                                </el-form-item>
                              </el-col>
                            </el-row>
                          </el-form>
                        </el-card>
                      </el-col>
                    </el-row>

                    <!-- 报警信息展示区域 -->
                    <el-row style="padding-top: 15px; padding-right: 30px; padding-left: 60px">
                      <el-col :span="24">
                        <el-card class="prewarn-detail-table" :body-style="{ padding: '10px' }">
                          <div slot="header" class="card-header" style="color: #88db85; font-weight: bolder">机车持续报警（共 {{ scope.row.trainPreWarnInfo.alarms.length }} 条）</div>

                          <el-table :data="scope.row.trainPreWarnInfo.alarms" style="width: 100%" :key="preWarnRowKeys">
                            <el-table-column label="发生时间" align="center">
                              <span slot-scope="preWarnsScope">{{ preWarnsScope.row.happenTime }}</span>
                            </el-table-column>
                            <el-table-column label="调机号" align="center">
                              <span slot-scope="preWarnsScope">{{ preWarnsScope.row.djNo }}</span>
                            </el-table-column>
                            <el-table-column label="报警内容" align="center">
                              <span slot-scope="preWarnsScope">{{ preWarnsScope.row.alarmContent }}</span>
                            </el-table-column>
                          </el-table>
                        </el-card>
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column>

                <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80">
                  <template slot-scope="scope">
                    <span>{{ (listQuery.page - 1) * listQuery.size + scope.$index + 1 }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="机车号" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.trainNo }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="机车型号" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.trainType }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="位置" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.trainRTInfo.coverRoute">
                      <span v-if="scope.row.trainRTInfo.coverRoute.length > 0 && scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end1.index].dType == 'track'">{{ stationname_list[scope.row.trainRTInfo.stationNo] }}({{ scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end1.index].dname }})</span>
                      <span v-else-if="scope.row.trainRTInfo.coverRoute.length > 0 && scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end1.index].part == 'previous'">{{ stationname_list[scope.row.trainRTInfo.stationNo] }}({{ scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end1.index].dname }}道岔岔前)</span>
                      <span v-else-if="scope.row.trainRTInfo.coverRoute.length > 0 && scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end1.index].part == 'normal'">{{ stationname_list[scope.row.trainRTInfo.stationNo] }}({{ scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end1.index].dname }}道岔定位)</span>
                      <span v-else-if="scope.row.trainRTInfo.coverRoute.length > 0 && scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end1.index].part == 'reverse'">{{ stationname_list[scope.row.trainRTInfo.stationNo] }}({{ scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end1.index].dname }}道岔反位)</span>
                      <span v-else>{{ stationname_list[scope.row.trainRTInfo.stationNo] }}</span>
                    </div>
                    <div v-else>
                      <span>{{ stationname_list[scope.row.trainRTInfo.stationNo] }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="尾部位置" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.trainRTInfo.coverRoute">
                      <span v-if="scope.row.trainRTInfo.coverRoute.length > 0 && scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end2.index].dType == 'track'">{{ stationname_list[scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end2.index].stationNo] }}({{ scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end2.index].dname }})</span>
                      <span v-else-if="scope.row.trainRTInfo.coverRoute.length > 0 && scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end2.index].part == 'previous'">{{ stationname_list[scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end2.index].stationNo] }}({{ scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end2.index].dname }}道岔岔前)</span>
                      <span v-else-if="scope.row.trainRTInfo.coverRoute.length > 0 && scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end2.index].part == 'normal'">{{ stationname_list[scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end2.index].stationNo] }}({{ scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end2.index].dname }}道岔定位)</span>
                      <span v-else-if="scope.row.trainRTInfo.coverRoute.length > 0 && scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end2.index].part == 'reverse'">{{ stationname_list[scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end2.index].stationNo] }}({{ scope.row.trainRTInfo.coverRoute[scope.row.trainRTInfo.end2.index].dname }}道岔反位)</span>
                      <span v-else>{{ stationname_list[scope.row.trainRTInfo.stationNo] }}</span>
                    </div>
                    <div v-else>
                      <span>{{ stationname_list[scope.row.trainRTInfo.stationNo] }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="定位方式" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.trainPreWarnInfo.locMode == 0">定位失败</span>
                    <span v-else-if="scope.row.trainPreWarnInfo.locMode == 1">卫星定位</span>
                    <span v-else-if="scope.row.trainPreWarnInfo.locMode == 2">码位跟踪</span>
                    <span v-else-if="scope.row.trainPreWarnInfo.locMode == 3">3</span>
                    <span v-else-if="scope.row.trainPreWarnInfo.locMode == 4">4</span>
                  </template>
                </el-table-column>

                <el-table-column label="服务状态" align="center">
                  <template slot-scope="scope">
                    <svg-icon v-if="scope.row.traceWarnState === '在线'" icon-class="tws_online" class-name="icon-net-svg" style="height: 23px; font-size: 50px" />
                    <svg-icon v-else icon-class="tws_offline" class-name="icon-net-svg" style="height: 23px; font-size: 50px" />
                  </template>
                </el-table-column>
                <el-table-column label="调监状态" align="center">
                  <template slot-scope="scope">
                    <svg-icon v-if="scope.row.stpTrainConnect" icon-class="tws_online" class-name="icon-net-svg" style="height: 23px; font-size: 50px" />
                    <svg-icon v-else icon-class="tws_offline" class-name="icon-net-svg" style="height: 23px; font-size: 50px" />
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getTrainsInfo" />
            </keep-alive>
          </el-tab-pane>
          <el-pagination background layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pagesize" :page-sizes="[10, 40, 100, 200, 500]" :total="trainInfoList.length" align="center"> </el-pagination>
        </el-tabs>
      </div>
    </el-main>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="temp" label-position="left" label-width="150px" style="width: 400px; margin-left: 50px">
        <el-form-item label="机车设备id" prop="deviceNo">
          <el-input v-model="temp.trainNo" />
        </el-form-item>
        <el-form-item label="机车号" prop="deviceNo">
          <el-input v-model="temp.trainNo" />
        </el-form-item>
        <el-form-item label="机车型号" prop="deviceNo">
          <el-input v-model="temp.trainType" />
        </el-form-item>
        <el-form-item label="机车照片" prop="deviceNo">
          <el-input v-model="temp.trainPhoto" />
        </el-form-item>
        <el-form-item label="车载设备部署方式" prop="deviceNo">
          <el-input v-model="temp.trainDeviceLaunch" />
        </el-form-item>
        <el-form-item label="车载设备组合方式" prop="deviceNo">
          <el-input v-model="temp.trainDeviceCompound" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatDate } from '@/utils/index'
import touchRipple from '@/directive/touchripple'
import ShowTime from '@/components/ShowTime'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { getTrainPageInfos, TWS, getNetState } from '@/api/trainInfo'
import { getStationInfos } from '@/api/gis'
import { deepClone } from '@/utils'

export default {
  name: 'traininfo',
  directives: {
    touchRipple
  },
  components: {
    ShowTime,
    Pagination
  },
  directives: { waves, touchRipple },
  data() {
    const defaultEnd = new Date()
    const defaultStart = new Date()
    defaultStart.setTime(defaultStart.getTime() - 3600 * 1000 * 24)
    return {
      requestState: false,
      updatenumber: 0,
      requireChannels: {
        //需要订阅的频道放在这里
        channels: [],
        //发出申请的组件名字放在这里
        component: 'trainInfo'
      },
      currentPage: 1,
      totalDataLength: 15,
      pagesize: 10,
      changeTrainInfoList: 0,
      preWarnRowKeys: 0,
      loading: false,
      trainsLoading: false,
      trainInfoList: [],
      tableKey: 0,
      nowTime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
      timer: null,
      reverse: false,
      trainStatusOptions: [
        {
          value: '0',
          label: '在线车辆'
        },
        {
          value: '1',
          label: '离线车辆'
        }
      ],
      // trainInfoList: [],
      listQuery: {
        trainId: '',
        trainStatus: '',
        page: 1,
        size: 10
      },
      total: 1,
      temp: {
        //机车设备id
        trainId: '',
        //机车号
        trainNo: '',
        //机车型号
        trainType: '',
        //机车照片
        trainPhoto: null,
        //车载设备部署方式
        trainDeviceLaunch: '',
        //车载设备每一端的设备组合方式
        trainDeviceCompound: ''
      },
      stationname_list: [],
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑修改车辆信息',
        create: '新增车辆信息'
      },
      activeTab: 'picture',
      //展开行
      expends: []
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  created() {},
  mounted() {
    getStationInfos()
      .then(response => {
        if (response.code == 0) {
          this.stationname_list = new Map()
          for (var key in response.data) {
            this.stationname_list[key] = response.data[key].name
          }
        } else this.requestState = true
      })
      .catch(error => {
        if (error.message.includes('timeout')) {
          this.requestState = true
        }
      })

    const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.nowTime = formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss') // 修改数据date
    }, 1000)
    this.getTrainsInfo()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }

    if (this.requireChannels.channels.length > 0) {
      //向全局申请取消订阅频道（订阅请求，订阅信息）
      this.$bus.$emit('Unsubscribe', this.requireChannels)

      // 关闭接收数据
      this.requireChannels.channels.forEach(element => {
        this.sockets.unsubscribe(element)
      })
    }
  },
  methods: {
    hasRepeat(arr1, arr2) {
      if (arr1.length === 0) {
        return false
      }
      if (arr2.length === 0) {
        return false
      }
      var flag = false
      for (var i = 0; i < arr1.length; i++) {
        if (arr2.indexOf(arr1[i]) >= 0) {
          flag = true
          break
        }
      }
      return flag
    },
    reFreshHtml() {
      this.$router.go(0)
    },
    updateSubscribe() {},
    boderStyleClass(val) {
      if (val === '一级') {
        return 'boderStyle_one'
      } else if (val === '二级') {
        return 'boderStyle_two'
      } else if (val === '三级') {
        return 'boderStyle_three'
      } else {
        return 'boderStyle_none'
      }
    },
    getBadgeType(val) {
      if (val === '一级') {
        return 'danger'
      } else if (val === '二级') {
        return 'warning '
      } else {
        return 'info'
      }
    },
    getBadgeHidden(val) {
      if (val !== '') {
        return false
      } else {
        return true
      }
    },
    getTrainsInfo() {
      this.trainsLoading = false
      getTrainPageInfos(1)
        .then(response => {
          if (response.code === 0) {
            this.trainInfoList = []
            var trainNetSearchList = []
            var i = -1
            // console.log(response.data, 'response.data')

            for (var j = 0; j < response.data.length; j++) {
              {
                i++
                this.trainInfoList.push({})

                this.trainInfoList[i] = {
                  trainId: '0',
                  trainType: '1',
                  trainName: '1',
                  trainNo: '1',
                  GnssInfo: '1',
                  trainPreWarnInfo: { alarms: [] },
                  trainRTInfo: {
                    speed: null
                  },
                  traceWarnState: '',
                  NetState: '',
                  stationNo: '',
                  stpTrainConnect: ''
                }

                if (response.data[j].deviceId) {
                  trainNetSearchList.push(response.data[j].deviceId)
                  if (response.data[j].trainNo) this.trainInfoList[i].trainNo = response.data[j].trainNo
                  else this.trainInfoList[i].trainNo = response.data[j].deviceId
                  this.trainInfoList[i].trainId = response.data[j].deviceId
                  this.trainInfoList[i].trainType = response.data[j].trainType
                  this.trainInfoList[i].trainName = response.data[j].deviceName
                  this.updatenumber++
                }
              }
            }
            // console.log(this.trainInfoList, 'this.trainInfoList')

            getNetState(trainNetSearchList, 1)
              .then(response => {
                if (response.code == 0) {
                  for (var i in response.data)
                    for (var j in this.trainInfoList)
                      if (this.trainInfoList[j].trainId == i) {
                        if (response.data[i] == 0) this.trainInfoList[j].NetState = '在线'
                        else if (response.data[i] == 1) this.trainInfoList[j].NetState = '离线'
                        this.updatenumber++
                      }
                } else this.requestState = true
              })
              .catch(error => {
                if (error.message.includes('timeout')) {
                  this.requestState = true
                }
              })

            TWS(1)
              .then(response => {
                if (response.code == 0) {
                  let that = this

                  for (const key in response.data.deviceInfos) {
                    for (var i = 0; i < this.trainInfoList.length; i++) {
                      if (key == this.trainInfoList[i].trainId) {
                        this.trainInfoList[i].stationNo = response.data.deviceInfos[key]
                        this.trainInfoList[i].traceWarnState = '在线'
                      }
                    }
                  }
                  this.trainInfoList.sort((a, b) => {
                    return (b.traceWarnState === '在线') - (a.traceWarnState === '在线')
                  })
                  if (this.changePersonInfoList == 0) {
                    this.changePersonInfoList = 1
                  } else {
                    this.changePersonInfoList = 0
                  }
                  this.updatenumber++
                } else this.requestState = true
                this.subSocketChannel()
              })
              .catch(error => {
                if (error.message.includes('timeout')) {
                  this.requestState = true
                }
              })

            //添加数组接口提架构，为获取实时数据做准备
            //addTrainInfoListNullData()

            //申请订阅socket频道
          } else {
            this.requestState = true
            this.$message.error(response.msg)
          }
        })
        .catch(error => {
          if (error.message.includes('timeout')) {
            this.requestState = true
          }
        })
      this.subSocketChannel()
    },
    // getTrainListTest() {
    //   var trainInfoTest = {
    //     //机车设备id
    //     trainId: '6008',
    //     //机车号
    //     trainNo: 'K888',
    //     //机车型号
    //     trainType: '货车',
    //     //机车照片
    //     trainPhoto: null,
    //     //车载设备部署方式
    //     trainDeviceLaunch: '',
    //     //车载设备每一端的设备组合方式
    //     trainDeviceCompound: '',
    //     //设备gnss定位信息
    //     GnssInfo: {
    //       //定位模式。0-无效、1-单点定位、2-差分定位、4-差分固定解、5-差分浮点解
    //       mode: '差分定位',
    //       //设备实体号（设备类型为0时为非监控机车编号）
    //       deviceId: null,
    //       //设备类型。0-非监控机车 1-列车 2-手持终端 3-定位终端
    //       deviceType: null,
    //       //经度（毫秒）
    //       lon: 55,
    //       //纬度（毫秒）
    //       lat: 66,
    //       //搜索到的卫星数
    //       satellite: 4,
    //       //定位精度类型。1-厘米表示 2-hdop表示
    //       accuracyType: '10cm',
    //       //按距离表示的精度。单位取厘米，整数
    //       accur_dis: null,
    //       //水平定位精度因子。取原值百倍整数
    //       accur_hdop: null,
    //       //卫星定位速度。单位cm/s
    //       speed: '25',
    //       //在当前设备登录（或绑定）的账户名称
    //       account: null
    //     },
    //     //列车运行实时信
    //     trainRTInfo: {
    //       //设备实体号
    //       deviceId: null,
    //       //设备类型。1-列车
    //       deviceType: null,
    //       //机车手柄。0-无法获取 1-向前 2-向后 3-中立
    //       handle: '向前',
    //       //运行模式。0-无法获取1-调车模式，2-列车模式
    //       mode: '列车模式',
    //       //速度
    //       speed: 66,
    //       //运行方向。0-无法确定1-正方向 2-反方向
    //       dir: '正方向',
    //       //上下行方向。0-未知1-上行，2-下行，3-无方向
    //       upDownDir: '下行',
    //       //当前所属站号
    //       stationNo: 55,
    //       //列车所跨线路对象数组
    //       coverRoute: {
    //         //线路元素所属站号
    //         stationNo: null,
    //         //线路元素类型。'track'-无岔区段 switch-有岔区段
    //         dType: null,
    //         //线路元素名称。
    //         dName: null,
    //         //有岔区段中所处部分。‘previous'-岔前 'normal'-定位 'reverse'-反位
    //         part: null
    //       },
    //       //列车两个端点对象信息
    //       end1: {
    //         //端点在中的coverRoute数组中的索引
    //         index: null,
    //         //端点距当前所处元素0点的偏移（m）
    //         offset: null
    //       },
    //       trainHead: null
    //     },
    //     alarmLevel: '',
    //     //列车预警通知
    //     trainPreWarnInfo: {
    //       //设备实体号
    //       deviceId: null,
    //       //设备类型。1-列车
    //       deviceType: null,
    //       //预警控制模式。0-正常预警；1-等待定位数据 2-预警后台异常（码位），无法计算预警 3-预警后台异常（计算饱和），无法计算预警
    //       controlMode: null,
    //       //车载融合定位模式：0-无法定位 1-纯卫星定位 2-纯码位定位 3-基于外部系统（STP等）定位 4-混合定位
    //       locMode: null,
    //       //上下行方向。0-未知1-上行，2-下行，3-无方向
    //       upDownDir: null,
    //       //当前车列前端所处站或区间，当有两个站号时为对应区间
    //       stationNos: null,
    //       //预警目标对象数组
    //       alarms: [
    //         {
    //           //目标点类型：0-未绑定设备列车 1-已绑定设备列车 2-人员手持终端 3-人员定位终端 4-开放围栏 5-封闭围栏 6-道口
    //           targetType: '人员手持终端',
    //           //目标id。当类型为1~3时为对应设备id；其余情况为相关类型的唯一id。
    //           targetId: 12345,
    //           //目标点状态码：0x01-定位失效 0x02-网络中断; 0x10-不适用 0x11-精确定位 0x12-区段定位
    //           targetMode: '精确定位',
    //           //目标点距离（米）
    //           distance: '250米',
    //           //到达目标点时间间隔（秒）
    //           time: '8秒',
    //           //当前位置所处区域。2-提示区 1-报警区 0-制动区
    //           areaNo: '制动区',
    //           //前方关键点（各区分界）距离（m）。当处提示区时，依次为制动点和报警点。
    //           keyPoints: '制动点',
    //           //目标点安全状态。0-非安全 1-安全 2-未知。类型为车和封闭围栏时该字段无意义，可填2。类型为人员时代表了人员上下道状态，“道”为本车前方的运行轨道，0-上道 1-下道。类型为开放围栏时，代表围栏关联人员是否全部下道。类型为道口时，0-道口未关闭 1-道口已关闭。
    //           safeState: '非安全'
    //         }
    //       ]
    //     },
    //     //列车事件信息
    //     trainEventInfo: [
    //       {
    //         content: '绑定账户：MBH',
    //         timestamp: '2018-04-15'
    //       },
    //       {
    //         content: '解绑账户：zbl',
    //         timestamp: '2018-04-13'
    //       },
    //       {
    //         content: '绑定账户：zbl',
    //         timestamp: '2018-04-11'
    //       }
    //     ],
    //     //跟踪预警服务管理状态（单设备）
    //     traceWarnState: '在线',
    //     // /单个网络实体在commsvr中的状态
    //     netState: 'true'
    //   }

    //   var trainInfoTestList = []

    //   let alarmLevel = ['一级', '二级', '三级', '', '一级', '二级', '三级', '', '一级', '一级']
    //   let trainId = ['6001', '6002', '6003', '6004', '6005', '6006', '6007', '6008', '6009', '6010']
    //   let trainType = ['DF', 'DF', 'DF', 'DF', 'HX', 'HX', 'HX', 'HX', 'DF', 'DF']
    //   let loction = ['十三矿', '首山一矿', '范庄站', '- -', '田庄站', '七矿', '宝丰站', '军营沟站', '军营沟站', '高庄站']
    //   let upDownDir = ['上行', '上行', '上行', '- -', '下行', '下行', '下行', '下行', '上行', '上行']
    //   let traceWarnState = ['在线', '在线', '在线', '离线', '在线', '在线', '在线', '在线', '在线', '在线']
    //   let mode = ['单点', '单点', '差分', '- -', '单点', '差分', '差分', '单点', '差分', '差分']
    //   let speed = ['39', '20', '56', '- -', '55', '78', '54', '23', '45', '68']
    //   let trainNo = ['9843', '3578', 'K45', 'K33', '2089', '2233', 'K32', 'K23', 'K45', 'K68']

    //   for (let index = 0; index < 10; index++) {
    //     trainInfoTest.alarmLevel = alarmLevel[index]
    //     trainInfoTest.trainId = trainId[index]
    //     trainInfoTest.trainType = trainType[index]
    //     trainInfoTest.trainRTInfo.stationNo = loction[index]
    //     trainInfoTest.trainRTInfo.speed = speed[index]
    //     trainInfoTest.trainRTInfo.upDownDir = upDownDir[index]
    //     trainInfoTest.traceWarnState = traceWarnState[index]
    //     trainInfoTest.GnssInfo.mode = mode[index]
    //     trainInfoTest.trainNo = trainNo[index]
    //     let ele = deepClone(trainInfoTest)
    //     trainInfoTestList.push(ele)
    //   }
    //   trainInfoTestList[3].netState = 'false'
    //   return trainInfoTestList
    // },
    ToDegrees(val) {
      if (typeof val == 'undefined' || val == '') {
        return ''
      }
      var i = val.indexOf('.')
      var strDu = i < 0 ? val : val.substring(0, i) //获取度
      var strFen = 0
      var strMiao = 0
      if (i > 0) {
        var strFen = '0' + val.substring(i)
        strFen = strFen * 60 + ''
        i = strFen.indexOf('.')
        if (i > 0) {
          strMiao = '0' + strFen.substring(i)
          strFen = strFen.substring(0, i) //获取分
          strMiao = strMiao * 60 + ''
          i = strMiao.indexOf('.')
          strMiao = strMiao.substring(0, i + 4) //取到小数点后面三位
          strMiao = parseFloat(strMiao).toFixed(0) //精确小数点后面两位
        }
      }
      return strDu + '°' + strFen + "'" + strMiao + '"'
    },
    subSocketChannel() {
      //取消所有订阅
      if (this.requireChannels.channels.length > 0) {
        //向全局申请取消订阅频道（订阅请求，订阅信息）
        for (var i = 0; i < this.requireChannels.channels.length; i++) {
          this.sockets.unsubscribe(this.requireChannels.channels[i])
        }
      }

      //清空请求list
      this.requireChannels.channels = []
      this.requireChannels.channels.push('TWS_Entitys:Train')
      //订阅频道
      this.trainInfoList.slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize).forEach(element => {
        var gnssInfoChannelName = 'GnssInfo:' + element.trainId + '_1'
        var trainRTInfoChannelName = 'TrainRTInfo:' + element.trainId + '_1'
        var trainDetailInfoChannelName = 'TrainDetailInfo:' + element.trainId + '_1'
        var personNetStateChannelName = 'TrainNetState:' + element.trainId
        this.requireChannels.channels.push(gnssInfoChannelName)
        this.requireChannels.channels.push(trainRTInfoChannelName)
        this.requireChannels.channels.push(trainDetailInfoChannelName)
        this.requireChannels.channels.push(personNetStateChannelName)
      })

      //向全局申请订阅频道（订阅请求，订阅信息）
      this.$bus.$emit('Subscribe', this.requireChannels)
      this.sockets.subscribe('TWS_Entitys:Train', res => {
        if (res.props.type == 'sync' || res.props.type == 'add') {
          this.updatenumber++
          for (const key in res.data.deviceInfos) {
            for (var i = 0; i < this.trainInfoList.length; i++) {
              if (key == this.trainInfoList[i].trainId) {
                this.trainInfoList[i].stationNo = res.data.deviceInfos[key]
                this.trainInfoList[i].traceWarnState = '在线'
                this.updatenumber++
              }
            }
          }
        }
        if (res.props.type == 'change') {
          for (const key in res.data.deviceInfos) {
            for (var i = 0; i < this.trainInfoList.length; i++) {
              if (key == this.trainInfoList[i].trainId) {
                this.trainInfoList[i].stationNo = res.data.deviceInfos[key]
                this.trainInfoList[i].traceWarnState = '在线'
                this.updatenumber++
              }
            }
          }
        }
        if (res.props.type == 'delete') {
          for (const key in res.data.deviceInfos) {
            for (var i = 0; i < this.trainInfoList.length; i++) {
              if (key == this.trainInfoList[i].trainId) {
                this.trainInfoList[i].stationNo = ''
                this.trainInfoList[i].alarmLevel = ''
                this.trainInfoList[i].GnssInfo = ''
                this.trainInfoList[i].stpTrainConnect = false
                this.trainInfoList[i].trainPreWarnInfo = { alarms: [] }
                this.trainInfoList[i].traceWarnState = '不在线'
                this.trainInfoList[i].trainRTInfo = { speed: null }
                this.updatenumber++
              }
            }
          }
        }
      })
      // 接收数据
      this.trainInfoList.slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize).forEach(element => {
        var gnssInfoChannelName = 'GnssInfo:' + element.trainId + '_1'
        var trainRTInfoChannelName = 'TrainRTInfo:' + element.trainId + '_1'
        var trainDetailInfoChannelName = 'TrainDetailInfo:' + element.trainId + '_1'
        var personNetStateChannelName = 'TrainNetState:' + element.trainId

        this.sockets.subscribe(personNetStateChannelName, res => {
          if (res.data.commsvr.wireless[element.trainId] == 0) element.NetState = '在线'
          if (res.data.commsvr.wireless[element.trainId] == 1) element.NetState = '离线'
          this.updatenumber++
        })
        this.sockets.subscribe(gnssInfoChannelName, res => {
          element.GnssInfo = res.data
          this.updatenumber++
        })
        this.sockets.subscribe(trainRTInfoChannelName, res => {
          element.trainRTInfo = res.data
          this.updatenumber++
        })
        this.sockets.subscribe(trainDetailInfoChannelName, res => {
          // console.log(res.data, 'res.data')

          element.trainPreWarnInfo = res.data
          var areaNo = 4
          var distance
          for (var i = 0; i < element.trainPreWarnInfo.alarms.length; i++) {
            if (element.trainPreWarnInfo.alarms[i].areaNo < areaNo) {
              areaNo = element.trainPreWarnInfo.alarms[i].areaNo
              distance = element.trainPreWarnInfo.alarms[i]
              element.alarmTarget = element.trainPreWarnInfo.alarms[i].targetId
            } else if (element.trainPreWarnInfo.alarms[i].areaNo == areaNo) if (element.trainPreWarnInfo.alarms[i].distance < distance) element.alarmTarget = element.trainPreWarnInfo.alarms[i].targetId
          }
          element.stpTrainConnect = res.data.stpTrainConnect
          areaNo = areaNo + 1
          element.alarmLevel = areaNo
          this.updatenumber++
        })
      })
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.subSocketChannel()
    },
    handleSizeChange: function(size) {
      this.pagesize = size
      this.subSocketChannel()
    },
    resetTemp() {
      this.temp = {
        //机车设备id
        trainId: '',
        //机车号
        trainNo: '',
        //机车型号
        trainType: '',
        //机车照片
        trainPhoto: null,
        //车载设备部署方式
        trainDeviceLaunch: '',
        //车载设备每一端的设备组合方式
        trainDeviceCompound: ''
      }
    },
    addTrainInfo() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateTrainInfo(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        //this.sortByID(order)
      }
    },
    CheckTrainInfoDetail(trainId) {
      this.listQuery.trainId = trainId
      this.activeTab = 'table'

      this.expends = []
      this.expends.push(trainId)
      this.listQuery.trainId = ''
    },
    //获取表格的行id
    getRowKeys(row) {
      return row.trainId
    }
  }
}
</script>

<style lang="scss" scoped>
.border_red {
  border: 5px solid red;
}
.border_orange {
  border: 5px solid orange;
}
.border_yellow {
  border: 5px solid yellow;
}
.border_white {
  border: 5px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

/* 选中后的字体颜色 */
.el-radio__label {
  color: #ffffff !important;
}

/* 选中后的字体颜色 */
.el-radio__input.is-checked + .el-radio__label {
  color: #d7a511 !important;
}
/* 选中后小圆点的颜色 */
.el-radio__input.is-checked .el-radio__inner {
  background: #d7a511 !important;
  border-color: #d7a511 !important;
}

.el-timeline-item {
  padding-top: 8px !important;
}

.el-timeline-item__content {
  color: #f08040 !important;
}
.el-timeline-item__timestamp {
  color: rgb(192, 239, 63);
}

.tab-bot {
  // width: 100%;
  margin-bottom: 2px;

  .bottom-one-cen {
    background-color: transparent !important;
    display: block;
    float: left;
    // width: 20.6%;
    height: 60px;
    // background-color: #fff;
    overflow: hidden;
    padding-top: 14px;
    font-size: 14px;
    text-align: left;
    color: #fff;
    font-weight: 600;

    p {
      margin-left: 16px;
      margin-top: 6px;
      color: #89f4dd;
      text-align: left;
      overflow: hidden;
      word-wrap: break-word;
    }
  }

  .sty {
    width: 4px;
    height: 16px;
    background-color: #6ed9d9;
    margin-right: 2px;
  }
}

#badgeItem {
  sup {
    font-size: 17px;
    right: 30px;
    font-weight: 600;
    height: 22px;
  }
}

.info {
  sup {
    background-color: #b25fe1;
  }
}

.boderStyle_one {
  border-style: groove;
  border-width: thick;
  border-color: red;
}

.boderStyle_two {
  border-style: groove;
  border-width: thick;
  border-color: yellow;
}

.boderStyle_three {
  border-style: groove;
  border-width: thick;
  border-color: #b25fe1;
}
/deep/ .el-form-item__label {
  color: #00cab7 !important;
}
</style>
